.sound-wave {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  .bar {
     /* bar的基础属性 */
     width: 4rpx;    /* 宽度 */
     height: 8rpx;   /* 基础高度 */
     background-color: #fff;  /* 颜色 */
     margin-right: 6rpx;
     transform: scaleY(1);
     animation-duration: 0.5s;
     animation-iteration-count: infinite;
     animation-direction: alternate;
     animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    /* 给不同的bar应用不同的动画，使跳动更有层次感 */
     &:nth-child(4n) {
        animation-name: bar-scale-xl;   
        animation-duration: 0.8 + 0.2s;  
     }
     &:nth-child(7n) {
        animation-duration: 0.8 + 0.35s;
     }
     &:nth-child(6n) {
        animation-name: bar-scale-lg;
        animation-duration: 0.8 + 0s;
     }
     &:nth-child(6) {
        animation-name: bar-scale-md;
        animation-duration: 0.8 + 0.05s;
     }

     &:nth-child(2),
     &:nth-child(5),
     &:nth-child(7),
     &:nth-child(9),
     &:nth-child(28),
     &:nth-child(31),
     &:nth-child(36)
     {
        animation-name: bar-scale-sm;
        animation-duration: 0.9s;
     }
  }

  /* 定义不同跳动效果的动画 */ 
  @keyframes bar-scale-sm {
     0%,
     50% {
        transform: scaleY(1);
     }
     25% {
        transform: scaleY(6);
     }
     75% {
        transform: scaleY(4);
     }
  }

  @keyframes bar-scale-md {
     0%,
     50% {
        transform: scaleY(2);
     }
     25% {
        transform: scaleY(6);
     }
     75% {
        transform: scaleY(5);
     }
  }

  @keyframes bar-scale-lg {
     0%,
     50% {
        transform: scaleY(8);
     }
     25% {
        transform: scaleY(4);
     }
     75% {
        transform: scaleY(6);
     }
  }

  @keyframes bar-scale-xl {
     0%,
     50% {
        transform: scaleY(1);
     }
     25% {
        transform: scaleY(7);
     }
     75% {
        transform: scaleY(11);
     }
  }
}
